<template>
  <div class="single-card">
    <div class="btn-group" v-if="showDeleteBtn || showCreateBtn || showEditBtn">
      <el-button type="primary" size="mini" @click="editCard" v-if="showCreateBtn || showEditBtn">{{$t('common.base.edit')}}</el-button>
      <el-button type="plain-third" size="mini" @click="delateCard" v-if="showDeleteBtn">{{$t('common.base.delete')}}</el-button>
    </div>

    <form-view ref="formViewRef" :fields="fields" :value="formValue" :form-cell-count="formCellCount" class="bbx-cell-form-view">
      <!-- start 操作人 -->
      <template slot="userName" slot-scope="{ field, value }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <template v-if="isOpenData">
              <open-data type="userName" :openid="formValue.attribute && formValue.attribute.staffId"></open-data>
            </template>
            <template v-else>
              {{value}}
            </template>
          </div>
        </div>
      </template>
      <!-- end 操作人 -->
      <!-- start 操作时间 -->
      <template slot="updateTime" slot-scope="{ field, value }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ value | fmt_datetime }}</div>
        </div>
      </template>
      <!-- end 操作时间 -->
    </form-view>


  </div>
</template>

<script>
/* mixin */
import cardMixin from './CardMixin.js';
/* util */
import { isOpenData } from '@src/util/platform';

export default {
  name: 'single-card',
  mixins: [cardMixin],
  props: {
    value: {
      type: Object,
      default: () => ({
        attribute: {}
      })
    },
    // 表单操作模式
    formEditingMode: {
      type: String,
      default: '', // create | edit
    },
    formCellCount: {
      type: Number,
      default: 1
    }
  },
  computed: {
    formValue() {
      return this.value || {}
    },
    fields() {
      return [
        ...this.cardInfo.fields,
        {
          displayName: this.$t('common.base.operator'),
          fieldName: 'userName'
        },
        {
          displayName: this.$t('common.label.operationTime'),
          fieldName: 'updateTime'
        }
      ]
    },
    /** 
    * @description 附加组件实例id
    */
    cardInstanceId() {
      return (this.value?.attribute || {}).id;
    },
    /** 
    * @description 显示编辑按钮(新增)
    * 该单次附加组件无数据时且有新增权限
    */
    showCreateBtn() {
      return !this.cardInstanceId && this.allowCreate;
    },
    /** 
    * @description 显示编辑按钮
    * 该单次附加组件有数据，且有编辑权限
    */
    showEditBtn() {
      return this.cardInstanceId && this.allowEdit;
    },
    /** 
    * @description 显示删除按钮
    * 该单次附加组件有数据时且有删除权限
    */
    showDeleteBtn() {
      return this.cardInstanceId && this.allowDelete;
    }
  },
  data() {
    return {
      isOpenData
    }
  },
  methods: {
    editCard() {
      this.$emit('editCard', this.value)
    },
    
    delateCard() {
      this.$emit('deleteCard', this.cardInstanceId)
    },
  }
}
</script>
